<template>
  <div class="container">
    <!-- 筛选列表 -->
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="科目：" prop="subjectId">
            <el-select
              v-model="queryParams.subjectId"
              placeholder="请选择科目"
              clearable
              size="small"
              @change="changeToGetQuesList"
            >
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题号：" prop="quesId">
            <el-select
              v-model="queryParams.quesId"
              placeholder="请选择题号"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in quesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="渲染状态：" prop="renderStatus">
            <el-select
              v-model="queryParams.renderStatus"
              placeholder="请选择渲染状态"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in drawStatus"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>渲染列表</span>
      </div>
      <div class="text item">
        <div class="changeBtn">
          <el-button
            type="primary"
            size="mini"
            style="float: right;"
            :loading="drawLoading"
            @click="drawDB"
          >渲染
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="float: right;margin: 0 10px 0 0;"
            @click="notMergeHandle"
            :disabled="draw_type==0"
          >不合并
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="float: right;margin: 0 10px 0 0;"
            @click="toMergeHandle"
            :disabled="draw_type==1"
          >合并
          </el-button>
          <!--          <el-select-->
          <!--            v-model="draw_type"-->
          <!--            placeholder="请选择渲染类型"-->
          <!--            clearable-->
          <!--            size="mini"-->
          <!--            style="float: right;margin-right: 10px;"-->
          <!--          >-->
          <!--            <el-option-->
          <!--              v-for="(item, index) in drawType"-->
          <!--              :key="index"-->
          <!--              :label="item.text"-->
          <!--              :value="Number(item.value)"-->
          <!--            ></el-option>-->
          <!--          </el-select>-->
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          @select-all="selectAll"
          @selection-change="handleSelectionChange"
          ref="multipleTable"
        >
          <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable"/>
          <el-table-column label="科目" align="center" prop="subjectName"/>
          <el-table-column label="题号" align="center" prop="quesId"/>
          <el-table-column label="渲染状态" align="center" :formatter="statusFormat"/>
          <el-table-column label="渲染数量" align="center" prop="renderCount"/>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleView(scope.row)"
              >详细信息
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
  import {getQuestions, getSeek1, readDBBatch} from "@/api/toolsystem/draw";

  export default {
    name: "subjectList",
    props: {
      subjectList: [Array]
    },
    data() {
      return {
        id: '',
        // 遮罩层
        loading: false,
        drawLoading: false,// 渲染按钮loading
        // 选中数组
        ids: [],
        subjectIds: [],
        draw_type: 0,// 渲染类型1-表示合并(此时必须选中两个同科目)
        // 总条数
        total: 0,
        // 表格数据
        tableData: [],
        obj: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          subjectId: null,
          quesId: null,
          renderStatus: null,
        },
        quesList: [], // 筛选-题号列表
        // subjectList:[], // 筛选-科目列表
        drawStatus: [], // 筛选-渲染状态列表
        drawType: [{
          value: 0,
          text: '不合并'
        }, {
          value: 1,
          text: '合并'
        }] // 渲染类型列表
      };
    },
    created() {
      this.getDicts("draw_sub_status").then(response => {
        this.drawStatus = response.data;
      });
      this.getList()
    },
    methods: {
      // 字典状态字典翻译
      statusFormat(row, column) {
        return this.selectDictLabel(this.drawStatus, row.renderStatus);
      },
      // 渲染操作
      drawDB() {
        if (this.ids.length <= 0) {
          return this.msgInfo('请选择需要渲染的科目')
        }
        if (this.draw_type == 1 && this.ids.length != 2) {
          return this.msgInfo('已选择合并，必须选择2个')
        }

        this.$confirm(
          '是否确认渲染',
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.drawLoading = true;
            let obj = {
              quesIds: this.ids,
              type: this.draw_type
            };
            readDBBatch(obj)
              .then(response => {
                console.log(response);
                if (response.code != 200) {
                  this.drawLoading = false;
                  return this.msgError(response.msg);
                }
                this.msgSuccess(response.msg);
                this.drawLoading = false;
                this.ids = [];
                this.subjectIds = [];
                this.getList();
              })
              .catch(error => {
                console.log(error);
                this.drawLoading = false;
              });
          })
          .catch(() => {
            this.msgInfo("取消渲染");
          });
      },
      // 筛选-获取题号列表
      changeToGetQuesList(val) {
        this.queryParams.quesId = null;
        getQuestions({id: val})
          .then(response => {
            console.log(response);
            this.quesList = response;
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 查询列表
      getList() {
        this.loading = true;
        getSeek1(this.queryParams)
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }

            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }
            this.tableData = response.rows;
            this.tableData.forEach(item => {
              item.isType = true
            })
            this.total = response.total;
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
            console.log(error);
          });
      },
      //搜索按钮操作
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$refs["queryForm"].resetFields();
        this.quesList = [];
        this.handleQuery();
      },
      // 不合并按钮
      notMergeHandle() {
        this.draw_type = 0;
        this.ids = [];
        this.subjectIds = [];
        this.$refs.multipleTable.clearSelection();
      },
      // 合并按钮
      toMergeHandle() {
        this.draw_type = 1;
        this.ids = [];
        this.subjectIds = [];
        this.$refs.multipleTable.clearSelection();
      },
      // 选择合并，禁用全选
      selectAll() {
        if(this.draw_type == 1){
            this.$refs.multipleTable.clearSelection()
            return this.msgInfo('已选择合并，禁止全选')
        }
      },
      checkSelectable(row) {
        return row.isType;
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.subjectIds = selection.map(item => {
          if(item.isType){
            return item.subjectId
          }
        });
        this.tableData.forEach(item => {
          if (this.draw_type == 1) {
            if (this.subjectIds[0]&&item.subjectId != this.subjectIds[0]) {
              return item.isType = false;
            }
            return item.isType = true;
          } else {
            return item.isType = true;
          }
        })
        this.ids = selection.map(item => {
          if(item.isType){
            return item.quesId
          }
        });
      },
      // 详细信息按钮
      handleView(row) {
        this.$parent.isChangeTabs = false;
        this.$parent.formData = {
          subjectName: row.subjectName,
          subjectId: row.subjectId,
          quesId: row.quesId
        }
      },
    }
  };
</script>

<style scoped>
  @import "../../../assets/styles/card.scss";
</style>
